Promise

✒️ 2025-05-23 15:22 내용 수정

참고 자료 : mdn web docs javascript Promise, mdn web docs javascript using promises, javascript promise-basics

비동기 작업의 미래의 완료 또는 실패 결과 값을 나타냄

const promise = new Promise(실행할함수);

const promise = new Promise((resolve, reject) => {
	// resolve()
	// reject()
});

특징

// 1. Promise를 반환하는 함수
function fetchData(success = true) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			if (success) {
				resolve("데이터 가져오기 성공!");
			} else {
				reject("데이터 가져오기 실패");
			}
		}, 2000); // 2초 후에 실행
	});
}

// 2. then / catch 구문으로 사용하기
fetchData(true)
	.then((result) => {
		console.log("성공:", result);
	})
	.catch((error) => {
		console.log("에러:", error);
	});

Promise Chaining

const promise = work1();
// promise2는 work1()을 완료하고, successCallback나 failureCallback의 완료까지다.
const promise2 = promise.then(successCallback, failureCallback); 

// 위의 내용을 한 번에 작성하면
const promise2 = work1().then(successCallback, failureCallback);

work1(function (result1) {
	work2(result1, function (result2) {
		work3(result2, function (result3) {
			console.log(result3);
		}, failureCallback);
	}, failureCallback);
}, failureCallback);

work1()
	.then(function (result) {
		return work2(result);
	})
	.then(function (result2) {
		sreturn work3(result3);
	})
	.then(function (result3) {
		console.log(result3);
	})
	.catch(failureCallback);

// 화살표 함수로 바꾸면
work1()
	.then((result) => work2(result))
	.then((result2) => work3(result2))
	.then((result3) => {
		console.log(result3);
	})
	.catch(failureCallback);

Promise의 상태

상태 설명
pending(대기) 초기 상태
fulfilled(이행) 연산이 성공적으로 완료됨
rejected(거부) 연산이 실패됨

Instance method

  1. then() 
promiseInstance
	.then(
		function(result) { 
			// onFulfilled일 때 실행할 함수
		},
		function(error) { 
			// onRejected일 때 실행할 함수, 선택 사항
		}
	)

var test = new Promise(function (resolve, reject) {
	resolve('test 성공');
})

test.then(
	function (value) {
		console.log(value);
	},
	function (reason) {
		console.log(reason);
	}
)

promise_then.png

  1. catch()
    • Promise에 rejected일 때의 callback을 추가한다.
    • then(null, failureCallback)과 동일하다.
    • 참고 자료 : mdn web docs Javascript Promise catch
    • 새 Promise를 반환하며, 현재 Promise의 상태와 무관하게 반환될 때 항상 pending 상태이다.
    • 현재 Promise가 fulfilled 상태라면 callback 함수를 호출하지 않고, 반환된 Promise는 이전 Promise와 같은 값을 그대로 fulfill(이행)한다.
promiseInstance.catch(
	function(reason) { 
		// rejected 일 때 실행할 callback
	}
)

var test = new Promise(function (resolve, reject) {
	resolve('test 성공?');
})

test.then(
	function (value) {
		console.log(value);
		throw new Error('에러 발생');
	})
	.catch(
		function (reason) {
			console.log(reason);
		}
	)

promise_catch.png

  1. finally()
promiseInstance.finally(
	function() { // settled(fulfilled나 rejected)일 때 실행할 내용
	}
)

var test = new Promise(function (resolve, reject) {
	resolve('test 성공?');
})

test.then(
	function (value) {
		console.log(value);
	})
	.catch(
		function (reason) {
			console.log(reason);
		}
	)
    .finally(
        function() {
            console.log('Promise 테스트 완료');
        }
    )

promise_finally 1.png

var test = new Promise(function (resolve, reject) {
	resolve('test 성공?');
})

test.then(
	function (value) {
		console.log(value);
		// throw new Error('에러 발생');
	})
	.catch(
		function (reason) {
			console.log(reason);
		}
	)
    .finally(
        function() {
            console.log('Promise 테스트 완료');
        }
    )

promise_finally 2.png

정적 메소드

메소드 설명
all(iterable) 주어진 모든 Promise가 fulfilled되거나 rejected될 때까지 pending하는 새 Promise 반환
allSettled(iterable) 주어진 모든 Promise가 settled(처리)될 때까지 pending하는 새 Promise 반환
any(iterable) 주어진 모든 Promise 중 하나라도 fulfill되면 즉시 그 값으로 fulfill하는 새 Promise 반환
race(iterable) 주어진 모든 Promise 중 하나라도 settled될 까지 pending하는 Promise 반환
reject(reason) 주어진 reason로 reject하는 Promise 반환
resolve() 주어진 value로 fulfill하는 Promise 반환
  1. all()
    • 주어진 모든 Promise가 fulfilled되거나 rejected될 때까지 pending하는 새 Promise를 반환 한다.
    • 참고 자료 : mdn seb docs Javascript Promise all
    • 순회 가능한 객체(ex: 배열)에 주어진 모든 Promise가 fulfilled된 후, 혹은 Promise가 주어지지 않았을 때 fulfill하는 Promise를 반환 한다.
      • 매개변수로 전달한 Promise 각각의 fulfilled된 결과값을 모두 모은 배열로 Promise를 fulfill한다.
    • 주어진 Promise 중 하나가 reject되면 첫 번째로 reject한 Promise의 이유를 사용해 이후 Promise들도 reject한다.
    • 각각의 Promise가 서로 연관이 있거나 하나만 reject되어도 즉시 전체가 reject되어야 하는 경우에 사용한다.
// 배열같은 순회 가능 객체를 전달.
// Promise로 된 배열을 전달할 수 있음
Promise.all(iterable);  

const promise1 = Promise.resolve(10);
const promise2 = 4;
const promise3 = new Promise((resolve, reason) => {
	setTimeout(resolve, 100, '3번째 promise');
});

Promise.all([promise1, promise2, promise3])
    .then(
        (values) => {console.log(values);}
    );

promise_all.png

  1. allSettled()
    • 주어진 모든 Promise가 settled(fulfilled되거나 rejected)될 때까지 pending하는 새 Promise를 반환한다.
    • 참고 자료 : mdn web docs Javascript Promise allSetteled
    • 매개변수로 전달한 순회 가능 객체의 Promise들이 서로의 성공/실패 여부와 관련 없이 여러 비동기 작업을 수행하거나, 항상 각 Promise의 실행 결과를 확인하고 싶을 때 사용한다.
// 배열같은 순회 가능 객체를 전달
// Promise로 된 배열을 전달할 수 있음
Promise.allSettled(iterable); 

const promise1 = Promise.resolve(10);
const promise2 = 4;
const promise3 = new Promise((resolve, reason) => {
	setTimeout(resolve, 100, '3번째 promise');
    throw new Error('3번째는 실패!');
});

Promise.allSettled([promise1, promise2, promise3])
    .then(
        (values) => {console.log(values);}
    );

promise_allSettled.png

  1. any()
    • 주어진 모든 Promise 중 하나라도 fulfill되면 즉시 그 값으로 fulfill하는 새 Promise를 반환 한다.
    • 참고 자료 : mdn web docs Javascript Promise any
    • 매개변수로 전달한 순회 가능 객체 내의 모든 Promise가 reject되면 에러가 발생한다.
// 배열같은 순회 가능 객체를 전달
// Promise로 된 배열을 전달할 수 있음
Promise.any(iterable);

const promise1 = Promise.reject(0);
const promise2 = 400;
const promise3 = new Promise((resolve, reason) => {
	setTimeout(resolve, 100, '3번째 promise');
    throw new Error('3번째는 실패!');
});

Promise.any([promise1, promise2, promise3])
    .then(
        (values) => {console.log(values);}
    );

promise_any.png

  1. race()
    • 주어진 모든 Promise 중 하나라도 settled(fulfilled되거나 rejected)될 까지 pending하는 Promise를 반환 한다.
    • 참고 자료 : mdn web docs Javascript Promise race
    • 매개변수로 전달한 순회 가능 객체 내의 Promise 중에서 가장 먼저 처리가 완료된 Promise의 결과값을 그대로 fulfill하거나 reject한다.
      • race()에서 반환하는 Promise는 순회 가능 객체 내의 Promise의 값을 비동기적으로 전달 받는 pending 상태의 Promise다.
      • 따라서 전달 받을 순회 가능 객체가 비어있으면 반환한 Promise는 계속 pending 상태다.
// 배열같은 순회 가능 객체를 전달
// Promise로 된 배열을 전달할 수 있음
Promise.race(iterable);

const promise1 = new Promise((resolve, reason) => {
    setTimeout(resolve, 500, '1번 Promise는 5초');
});

const promise2 = new Promise((resolve, reason) => {
    setTimeout(resolve, 300, '2번 Promise는 3초');
});

Promise.race([promise1, promise2])
    .then((value) => {
        console.log(value);
    })

promise_race.png

  1. reject()
    • 주어진 reason로 reject하는 Promise 반환 한다.
    • 참고 자료 : mdn web docs Javascript Promise reject
    • 디버깅 목적 및 오류를 잡기 위해 Error 생성자의 인스턴스를 전달해서 사용할 수 있다.
// reason : Promise가 reject된 이유
Promise.reject(reason);

Promise.reject("reject()를 테스트")
    .then(
        function (result) {
            console.log("---이행했을 때 : " + result);
        },
        function (reason) {
            console.log("---거부됬을 때 : " + reason);
        }
    );

promise_reject.png

  1. resolve()
    • 주어진 value로 fulfill하는 Promise를 반환 한다.
    • 참고 자료 : mdn web docs Javascript Promise resolve
    • 지정한 값이 then()을 사용할 수 있는 Promise이나 thenable와 같은 값이라면, resolve()로 반환되는 Promise는 then() 메소드를 따라가서 자신의 최종 상태를 결정한다.
      • 스스로 결정하는 thenable에서 resolve()를 호출하면 무한히 Promise를 펼치려 해서 무한 재귀 호출이 일어날 수 있으므로 주의해야 한다.
      • 재귀 호출은 메서드(Methods)#재귀호출 참고.
    • 그 외의 경우에는 반환된 Promise는 resolve()로 전달한 값으로 fulfill된다.
Promise.resolve(value); // 값을 전달

const promise1 = Promise.resolve(51);
const promise2 = Promise.resolve('resolve()를 테스트함');

promise1.then((value) => {
    console.log(value);
});

promise2.then((value) => {
    console.log(value);
});

promise_resolve.png